<template>
  <el-row :gutter="8">
    <el-col :span="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>属性列表</span>
            <el-col :span="4.5">
              <el-button-group>
                <el-tooltip content="预览报表" placement="top">
                  <el-button icon="Tickets"></el-button>
                </el-tooltip>
                <el-tooltip content="新增" placement="top">
                  <el-button icon="Plus" @click="handleAddReport"/>
                </el-tooltip>
              </el-button-group>
            </el-col>
          </div>
        </template>
        <el-table v-loading="reportLoading" :data="reportList" height="300" border fit>
          <el-table-column label="名称" prop="name" />
          <el-table-column label="编码" prop="code" />
          <el-table-column label="分组列" prop="groupCols" />
          <el-table-column label="显示列" prop="viewCols" />
          <el-table-column label="聚合列" prop="calcCols" />
          <el-table-column label="固定条件" prop="stableCond" />
          <el-table-column label="统计过滤" prop="filterCfg" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button-group size="small">
                <el-button
                    icon="Edit"
                    @click="handleEditReport(scope.row)"
                />
                <el-button
                    icon="Delete"
                    @click="handleDeleteReport(scope.row)"
                />
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { ModeTypeEnum } from '@/store/enums/ModeTypeEnum';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
import PropEnum from '@/store/enums/PropEnum';
import modelApi from '@/api/module/model';

const { dataType } = PropEnum;

export default defineComponent({
  name: 'ReportCfg',
  props: ['pageType', 'areaCode', 'modelCode'],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const { pageType, modelCode } = toRefs(props);
    const { sys_user_vip, sys_def_type } = proxy.useDict('sys_user_vip', 'sys_def_type');
    const vueData = reactive({
      entityFormTitle: '',
      entityFormOpen: false,
      entityForm: {},
      modelInfo: {},
      reportLoading: false,
      reportList: [{
        id: '001',
        code: 'G001',
        name: '进销报表',
        groupCols: '测试列1,测试列2',
        viewCols: '测试列1,测试列2,名称1,名称列2',
        calcCols: '-',
        stableCond: '-',
        filterCfg: 'having条件',
      }],
    });

    function load() {
      modelApi.getFullInfo(modelCode.value).then(res => {
        vueData.modelInfo = res.data;
      });
    }
    
    function handleAddReport() {
      
    }

    function handleEditReport() {

    }
  
    function handleDeleteReport() {
      
    }
    return {
      dataType,
      pageType,
      PageTypeEnum,
      SwitchEnum,
      ModeTypeEnum,
      sys_user_vip,
      sys_def_type,
      handleAddReport,
      handleEditReport,
      handleDeleteReport,
      ...toRefs(vueData),
      load,
    }
  },
});
</script>

<style scoped>

</style>